<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的借阅</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
        <link rel="stylesheet" type="text/css" href="../css/index.css" />
        <script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <style>
			.mui-control-content {
				min-height: 600px;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.tu-jia .re{
				font-size: 12px;
			}
			.mui-media-body p a{
				color: #EC971F;
			}
			.mui-slider-handle .mui-ellipsis{
				padding-top: 10px;
			}
			.detail-article{width: 100%; overflow: hidden; background-color: #fff}
        .detail-article nav{ width: 100%;}
        .detail-article nav ul{ width: 100%; padding:3% 0 0 0; overflow: hidden; display: table;margin:0 auto;}
        .detail-article nav ul li{ display: table-cell; width: 33.333333%; text-align: center; font-size:15px; color: #585959; border-bottom:solid 1px #C3C3C3; padding: 2% 0;  }        
        .detail-article nav ul .article-active{ border-bottom:2px solid #F14E41; color:#F14E41;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-table-view all-top">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的借阅</h1>
			<a id='showUserPicker' class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
		
		<!--tab-->
	    <article class="detail-article" style="margin-top: 2rem;">
				<nav>					
					<ul class="article" style="position: fixed; background: #FFFFFF; z-index: 1;">
						<li id="talkbox1" class="article-active">我的借阅</li>
						<li id="talkbox2">我的借书架</li>
						<li id="talkbox3">我的收藏</li>
					</ul>
				</nav>
				<section class="talkbox1 borr-sec1">					
                    <div style="width: 100%; background: #FFFFFF;">
                        <div class="search-kuai" >
                            <img class="search-img" src="../images/book2.jpg">
                            <div style="padding:0 .5rem;">
                                <div class="look-r">
                                    <div class="look-p">幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉</div>
                                    <div style="font-size: 12px; color: #ACACB4;">开始时间 ：2017年10月3日</div>
                                    <div style="font-size: 12px; color: #ACACB4;">结束时间 ：2018年10月3日</div>		        				
                                </div>		        			
                                <div class="look-r2">
                                    <div style=" font-size: 13px; margin: .3rem 0 .8rem 0; color: #F0AD4E;">续借次数 ：1次</div>
                                    <button type="button" class="mui-btn mui-btn-warning" onclick="javascript:window.location.href='region2.html';">续借</button>
                                </div>
                                <div style="clear: both;"></div>
                             </div>
                                
                            </div>
                        </div>		            
                    </div>
				</section>
				<section class="talkbox2" style="display: none; margin-top: -2rem;">					                     
                    <div id="OA_task_1" class="mui-content borr-sec2">
						<ul  class="mui-table-view">
                            <li class="mui-table-view-cell">
								<a href="javascript:;">
									<div class="mui-slider-handle mui-checkbox mui-left">
                                        <input type="checkbox" / style=" margin-left:-1.8rem;" id="allChecks" onclick="ckAll()">										
										<div style=" margin-left:2rem; padding:.5rem 0 0 0; font-size:14px; float:left;">全选</div>
                                        <div style="float: right; padding-top:.4rem;">
                                           <a onclick="javascript:window.location.href='over-look.html'"><span style="font-size:14px; color: #F0AD4E;">借阅</span></a>
                                           <a class="mui-tab-item" href="#delete">
                                              
				                              <span class="mui-icon mui-icon-trash"></span>
			                               </a>
                                        </div>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="javascript:;">
									<div class="mui-slider-right mui-disabled">
										<a class="mui-btn mui-btn-red">移除</a>
									</div>
									<div class="mui-slider-handle mui-checkbox mui-left">
                                        <input type="checkbox" / style=" margin-left:-1.8rem; margin-top:1rem" name="check">
										<img class="search-img" src="../images/book.jpg" style="margin-right:1rem; margin-left:1.5rem">
										<div class="look-p" style="padding-top:1.3rem;">幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉</div>
									</div>
								</a>
							</li>
                            <li class="mui-table-view-cell">
								<a href="javascript:;">
									<div class="mui-slider-right mui-disabled">
										<a class="mui-btn mui-btn-red">移除</a>
									</div>
									<div class="mui-slider-handle mui-checkbox mui-left">
                                        <input type="checkbox" / style=" margin-left:-1.8rem; margin-top:1rem" name="check">
										<img class="search-img" src="../images/book.jpg" style="margin-right:1rem; margin-left:1.5rem">
										<div class="look-p" style="padding-top:1.3rem;">幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉</div>
									</div>
								</a>
							</li>
                            <li class="mui-table-view-cell">
								<a href="javascript:;">
									<div class="mui-slider-right mui-disabled">
										<a class="mui-btn mui-btn-red">移除</a>
									</div>
									<div class="mui-slider-handle mui-checkbox mui-left">
                                        <input type="checkbox" / style=" margin-left:-1.8rem; margin-top:1rem" name="check">
										<img class="search-img" src="../images/book.jpg" style="margin-right:1rem; margin-left:1.5rem">
										<div class="look-p" style="padding-top:1.3rem;">幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉</div>
									</div>
								</a>
							</li>                           
						</ul>
					</div>
					
				</section>
                <section class="talkbox3 borr-k" style="display: none;">					
                    <div id="OA_task_2" class="mui-content borr-sec3">
						<ul  class="mui-table-view">
                            <li class="mui-table-view-cell">
                               <a href="javascript:;">
									<div class="mui-slider-right mui-disabled">
										<a class="mui-btn mui-btn-red">删除</a>
									</div>
									<div class="mui-slider-handle mui-checkbox mui-left">                                       
										<a onclick="javascript:window.location.href='borrow1.html'">
											<img class="search-img" src="../images/book.jpg" style="margin-right:1rem;">
											<div class="look-p" style="padding-top:1.3rem;">幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉</div>
										</a>
									</div>
							   </a>
                            </li>
                            <li class="mui-table-view-cell">
                               <a href="javascript:;">
									<div class="mui-slider-right mui-disabled">
										<a class="mui-btn mui-btn-red">删除</a>
									</div>
									<div class="mui-slider-handle mui-checkbox mui-left">                                       
										<a onclick="javascript:window.location.href='borrow1.html'">
											<img class="search-img" src="../images/book.jpg" style="margin-right:1rem;">
											<div class="look-p" style="padding-top:1.3rem;">幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉</div>
										</a>
									</div>
							   </a>
                            </li>
                            <li class="mui-table-view-cell">
                               <a href="javascript:;">
									<div class="mui-slider-right mui-disabled">
										<a class="mui-btn mui-btn-red">删除</a>
									</div>
									<div class="mui-slider-handle mui-checkbox mui-left">                                       
										<a onclick="javascript:window.location.href='borrow1.html'">
											<img class="search-img" src="../images/book.jpg" style="margin-right:1rem;">
											<div class="look-p" style="padding-top:1.3rem;">幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉</div>
										</a>
									</div>
							   </a>
                            </li>
                            <li class="mui-table-view-cell">
                               <a href="javascript:;">
									<div class="mui-slider-right mui-disabled">
										<a class="mui-btn mui-btn-red">删除</a>
									</div>
									<div class="mui-slider-handle mui-checkbox mui-left">                                       
										<a onclick="javascript:window.location.href='borrow1.html'">
											<img class="search-img" src="../images/book.jpg" style="margin-right:1rem;">
											<div class="look-p" style="padding-top:1.3rem;">幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉</div>
										</a>
									</div>
							   </a>
                            </li>
                            <li class="mui-table-view-cell">
                               <a href="javascript:;">
									<div class="mui-slider-right mui-disabled">
										<a class="mui-btn mui-btn-red">删除</a>
									</div>
									<div class="mui-slider-handle mui-checkbox mui-left">                                       
										<a onclick="javascript:window.location.href='borrow1.html'">
											<img class="search-img" src="../images/book.jpg" style="margin-right:1rem;">
											<div class="look-p" style="padding-top:1.3rem;">幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉</div>
										</a>
									</div>
							   </a>
                            </li>
                            <li class="mui-table-view-cell">
                               <a href="javascript:;">
									<div class="mui-slider-right mui-disabled">
										<a class="mui-btn mui-btn-red">删除</a>
									</div>
									<div class="mui-slider-handle mui-checkbox mui-left">  
										<a onclick="javascript:window.location.href='borrow1.html'">
											<img class="search-img" src="../images/book.jpg" style="margin-right:1rem;">
											<div class="look-p" style="padding-top:1.3rem;">幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉幸福就是可以一起睡觉</div>
										</a>
									</div>
							   </a>
                            </li>
                        </ul>
                    </div>
				</section>
				
			</article>
<script type="text/javascript">
	/*checkbox全部选中*/
	 //全选
 function ckAll() {
 	var flag = document.getElementById("allChecks").checked;
 	var cks = document.getElementsByName("check");
 	for(var i = 0; i < cks.length; i++) {
 		cks[i].checked = flag;
 	}
 };
 $(function() {
 			$('.article li').click(function(){

			$(this).addClass('article-active').siblings().removeClass('article-active');
			if($(this).attr("id")=="talkbox1"){
				$('.talkbox1').show();
				$('.talkbox2').hide();
				$('.talkbox3').hide();
			}else if($(this).attr("id")=="talkbox2"){
				$('.talkbox2').show();
				$('.talkbox1').hide();
			    $('.talkbox3').hide();
			}else{
				$('.talkbox3').show();
				$('.talkbox1').hide();
				$('.talkbox2').hide();
			}

		});	
	});
	(function($) {
				//第一个demo，拖拽后显示操作图标，点击操作图标删除元素；
				$('#OA_task_1').on('tap', '.mui-btn', function(event) {
					var elem = this;
					var li = elem.parentNode.parentNode;
					mui.confirm('确认移除该条记录？', 'Hello MUI', btnArray, function(e) {
						if (e.index == 0) {
							li.parentNode.removeChild(li);
						} else {
							setTimeout(function() {
								$.swipeoutClose(li);
							}, 0);
						}
					});
				});
				var btnArray = ['确认', '取消'];
				
			})(mui);
			
			(function($) {
				//第一个demo，拖拽后显示操作图标，点击操作图标删除元素；
				$('#OA_task_2').on('tap', '.mui-btn', function(event) {
					var elem = this;
					var li = elem.parentNode.parentNode;
					mui.confirm('确认移除该条记录？', 'Hello MUI', btnArray, function(e) {
						if (e.index == 0) {
							li.parentNode.removeChild(li);
						} else {
							setTimeout(function() {
								$.swipeoutClose(li);
							}, 0);
						}
					});
				});
				var btnArray = ['确认', '取消'];
				
			})(mui);
			
			function renew1()
			{
				if($(".col-renew1").is(":visible")==false){
					$(".col-renew1").show();
				}else{
					$(".col-renew1").hide();
				}
				
			}
			function renew2()
			{
				if($(".col-renew2").is(":visible")==false){
					$(".col-renew2").show();
				}else{
					$(".col-renew2").hide();
				}
				
			}
			function renew3()
			{
				if($(".col-renew3").is(":visible")==false){
					$(".col-renew3").show();
				}else{
					$(".col-renew3").hide();
				}
				
			}
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		mui('body').on('shown', '.mui-popover', function(e) {
			//console.log('shown', e.detail.id);//detail为当前popover元素
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			//console.log('hidden', e.detail.id);//detail为当前popover元素
		});
		var info = document.getElementById("info");
		mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个actionsheet
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if (parent.classList.contains('mui-popover-action')) {
					break;
				}
			}
			//关闭actionsheet
			mui('#' + parent.id).popover('toggle');
			info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";
		})
</script>


	</body>
</html>
